I'd like to develop my site with a layout that looks somewhat like houses with connected plumbing, or multiple computers connected to a network. Basically, the will be boxes floating in space, with lines connecting some of the boxes. I'd like these lines to have some turns in them as well (just simple 90 degree corners) rather than just a straight line.

My question is what is the best way to achieve this, and perhaps a small example. My thoughts were to use:

PHP and CSS: I could create a background grid and then, with some complicated algorithms, draw paths using the grid's borders. This would be more dynamic, but I'm not sure I can plot the math all by myself.

just CSS: Perhaps this is as simple as making some pre-drawn lines like L-shapes and T-junctions, then just placing and scaling them. But I don't believe there's a way to scale an image by slicing it.. so the line width would be scaled and thus each image would look different.

Any thoughts?